<!doctype>
<html>
<head>

	<!-- Place this data between the <head> tags of your website -->
	<title>it's a(door)able</title>
	<meta name="description" content="a one-minute minigame."/>
	<link rel="icon" type="image/png" href="favicon.png">

	<!-- Schema.org markup for Google+ -->
	<meta itemprop="name" content="it's a(door)able">
	<meta itemprop="description" content="a one-minute minigame.">

	<!-- Open Graph data -->
	<meta charset="utf-8">
	<!-- Style -->
	<link rel="stylesheet" type="text/css" href="css/index.css">

</head>
<body ontouchmove="event.preventDefault()">
	<div id="joystick"></div>
	<div id="loading"><div>加载中...</div></div>

	<div id="whole_container">

		<!--span style="display:none"-->
		<div id="screen_one">
			<canvas id="canvas_intro"></canvas>
		</div>

		<div id="screen_two">
			<div id="canvas_container">

				<canvas id="canvas_1" width="300" height="380"></canvas>
				<canvas id="canvas_2" width="300" height="380"></canvas>
				<canvas id="canvas_3" width="300" height="380" style="margin:0"></canvas>

				<div id="valentines_text"></div>
				<div id="rewind_text">倒带...</div>
				<div id="replay_text">回放...</div>

			</div>
		</div>
		<!--/span-->

		<div id="screen_three">

			<div id="bottom">
				<a href="https://weibo.com/u/1727240411">edit by @tlxfif</a>
				|
				<a href="https://twitter.com/ncasenmare">made by @ncasenmare</a>
				|
				<a href="https://github.com/ncase/door">开源代码</a>
			</div>

			<div id="end_container">

				<span  style="font-size:38px;display: none">P.S: 你可以添加一些想对对方说的话~</span>
				<input style="display: none" id="your_message" placeholder="(在这里输入呀~)">

				<span style="display: none" >然后复制并将此链接发送给你爱的人</span>
				<input style="display: none" id="your_link" readonly>

				<span style="font-size:10px;color: #999;">
					<span style="font-size: 19px;">最后，如果你想给这个</span>
					<br>
					<span style="font-size: 16px;">小游戏的创造者一些爱,你可以</span>
					<br>
					<a href="https://www.patreon.com/ncase" target="_blank" style="text-decoration: none;">
						<div id="support">在 patreon 上支持他哦</div>
					</a>
				</span>

				<br>
				<br>

				<span style="font-size:30px">
					感谢您的参与! &lt;3
				</span>

				<br>
				<br>

				<span style="font-size:30px">
					<a href="javascript:location.reload();" style="text-decoration: none;color: #999;">
						<div>再玩一次吧</div>
					</a>
				</span>

			</div>
		</div>

	</div>
</body>
</html>

<script src="js/Key.js"></script>
<script src="js/game.js"></script>
<script src="js/popup.js"></script>
<!--<script src="js/soundjs-0.6.0.min.js"></script>-->
<!--IOS兼容声音问题-->
<script src="js/soundjs.min-1.0.2.js"></script>
<script src="js/nipplejs.min.js"></script>

<script>
	var options = {
		zone: document.getElementById('joystick'),
		mode: 'static',//mode: 'semi','dynamic'
		position: { left: '50%', top: '85%' },
		color: 'rgb(221, 221, 221)',
		size: 200
	};
	var manager = nipplejs.create(options);
	manager.on('start end ' +
			'move',function (evt, data) {
		if(data.angle){
			var p = data.angle.degree;
			if(p>=0&&p<=30){
				Key.right=true;
				Key.left=false;
				Key.up=false;
				Key.down=false;
			}else if(p>=30&&p<=60){
				Key.right=true;
				Key.up=true;
				Key.left=false;
				Key.down=false;
			}else if(p>=60&&p<=120){
				Key.up=true;
				Key.right=false;
				Key.left=false;
				Key.down=false;
			}else if(p>=120&&p<=150){
				Key.up=true;
				Key.left=true;
				Key.right=false;
				Key.down=false;
			}else if(p>=150&&p<=210){
				Key.left=true;
				Key.up=false;
				Key.right=false;
				Key.down=false;
			}else if(p>=210&&p<=240){
				Key.left=true;
				Key.down=true;
				Key.up=false;
				Key.right=false;
			}else if(p>=240&&p<=300){
				Key.down=true;
				Key.up=false;
				Key.right=false;
				Key.left=false;
			}else if(p>=300&&p<=330){
				Key.right=true;
				Key.down=true;
				Key.up=false;
				Key.left=false;
			}else if(p>=330&&p<=360){
				Key.right=true;
				Key.up=false;
				Key.left=false;
				Key.down=false;
			}
		}
		if(evt.type==='end'){
			Key.up=false;
			Key.left=false;
			Key.down=false;
			Key.right=false;
		}
	  }
	);
</script>
